import { Table } from "antd";
import type { ColumnsType } from "antd/es/table";
import ScrollView from "../../components/scrollView";
import { list, DataType, sharedOnCell, data } from "./dto";
import "./index.css";

const TestPage = () => {
  const columns: ColumnsType<DataType> = [
    {
      title: "Name",
      dataIndex: "name",
      render: (text) => <a>{text}</a>,
      onCell: (_, index) => ({
        colSpan: (index as number) < 4 ? 1 : 2,
      }),
    },
    {
      title: "Age",
      dataIndex: "age",
      onCell: sharedOnCell,
    },
    {
      title: "Home phone",
      colSpan: 2,
      dataIndex: "tel",
      onCell: (_, index) => {
        if (index === 2) {
          return { rowSpan: 2 };
        }
        // These two are merged into above cell
        if (index === 3) {
          return { rowSpan: 0 };
        }
        if (index === 4) {
          return { colSpan: 0 };
        }

        return {};
      },
    },
    {
      title: "Phone",
      colSpan: 0,
      dataIndex: "phone",
      onCell: sharedOnCell,
    },
    {
      title: "Address",
      dataIndex: "address",
      onCell: sharedOnCell,
    },
  ];

  return (
    <div className="test-page">
      <div className="container">
        <ScrollView>
          {list?.map((item: any, index: number) => {
            return (
              <div key={index} className="scroll_item">
                <div>{item?.name}</div>
              </div>
            );
          })}
        </ScrollView>
        <Table columns={columns} dataSource={data} bordered />
      </div>
    </div>
  );
};

export default TestPage;
